import React, { Component,PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Button, ButtonRoleGroup } from 'tinper-bee';
import Grid from 'components/Grid';
import Alert from 'components/Alert';
import PopupModal from './PopupModal';

const propTypes = {

};

const defaultProps = {

};


class EditGrid extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            selectedIndex: 0, //默认选中行
            editModelVisible: false,
            btnFlag: 0,
            delModalVisible: false, //删除弹框
            showHoverContent: false,
        };
    }
    componentDidMount() { }

    /**
     *
     * @param {*} index 跳转指定页数
     * @param {*} value 设置一页数据条数
     */
    onDataNumSelect = (index, value) => {
        this.onPageSelect(value, 1);
    }

    /**
     * 关闭修改model
     */
    onCloseEdit = (data) => {
        this.setState({
            editModelVisible: false,
            btnFlag: -1,
            childList: data
        });
    }

    /**
     *
     * @param {Number} type 1、取消 2、确定
     * @returns {Promise<void>}
     */
    confirmGoBack(type) {
        this.setState({ delModalVisible: false });
        if (type === 1) { // 确定
            const { list } = this.props;
            const { selectedIndex: index } = this.state;
            list.splice(index, 1);
            actions.monitorSample.updateState({ list });
        }
    }

    /**
     * 删除modal 显示
     */
    onClickDel = () => {
        let { list } = this.props;
        if (list.length > 0) {
            this.setState({
                delModalVisible: true,
                showHoverContent: false
            });
        } else {
            Info("数据为空，不能删除");
        }
    }

    /**
     *
     * @param {Number} pageIndex 跳转指定页数
     */
    freshData = (pageIndex) => {
        this.onPageSelect(pageIndex, 0);
    }

    /**
     *
     * @param {Number} value  pageIndex 或者 pageIndex
     * @param {Number} type 为0标识为 pageIndex,为1标识 pageSize
     */
    onPageSelect = (value, type) => {
        let queryParam = deepClone(this.props.queryParam);
        let { pageIndex, pageSize } = getPageParam(value, type, queryParam.pageParams);
        queryParam['pageParams'] = { pageIndex, pageSize };
        this.setState({ selectedIndex: 0 }); //默认选中第一行
        actions.monitorSample.loadList(queryParam);
    }

    /**
     *
     * @param {Number} btnFlag 弹框框状态 0为添加、1为修改、2为详情
     */
    onClickShowModel = (btnFlag) => {
        this.setState({ editModelVisible: true, btnFlag });
    }

    /**
     * 删除modal 显示
     */
    onClickDel = () => {
        let { list } = this.props;
        if (list.length > 0) {
            this.setState({
                delModalVisible: true,
                showHoverContent: false
            });
        } else {
            Info("数据为空，不能删除");
        }
    }

    render() {
        let { btnPageFlag, pageIndex, total, totalPages, column, list, showLoading,children,ColumnsData } = this.props;
        let { selectedIndex,
            editModelVisible,
            btnFlag,
            delModalVisible,
            showHoverContent
        } = this.state;

        let paginationObj = {   // 分页
            activePage: pageIndex,//当前页
            total: total,//总条数
            items: totalPages,
            freshData: this.freshData,
            onDataNumSelect: this.onDataNumSelect,
        }
        let sortObj = {
            mode: 'multiple',
            backSource: true
        }
        let btnForbid = list && list.length <= 0;
        return (
            <div>
                {btnPageFlag != 2 && <Button

                    className="ml8 addtable"
                    onClick={() => {
                        this.onClickShowModel(0);
                    }}
                >增行</Button>}

                <div className="gird-parent">
                    <Grid
                        data={list}
                        rowKey={(r, i) => i}
                        columns={column}
                        paginationObj={paginationObj}
                        selectedRow={this.selectedRow}
                        multiSelect={false}
                        hoverContent={() => {
                            if (showHoverContent) {
                                return (
                                    <ButtonRoleGroup funcCode="singletable-popupEdit">
                                        <Button
                                            isAction
                                            bordered
                                            className="ml8"
                                            disabled={btnForbid}
                                            onClick={() => {
                                                this.setState({ showHoverContent: false });
                                                this.onClickShowModel(1);
                                            }}
                                        >修改</Button>
                                        <Button
                                            isAction
                                            bordered
                                            className="ml8"
                                            disabled={btnForbid}
                                            onClick={() => {
                                                this.setState({ showHoverContent: false });
                                                this.onClickShowModel(2);
                                            }}
                                        >详情</Button>
                                        <Button
                                            isAction
                                            bordered
                                            className="ml8"
                                            disabled={btnForbid}
                                            onClick={this.onClickDel}
                                        >删除</Button>
                                    </ButtonRoleGroup>
                                )
                            }
                            else {
                                return null
                            }

                        }}
                        onRowHover={(index) => {
                            this.setState({ selectedIndex: index, showHoverContent: true });
                        }}
                        showHeaderMenu={true}
                        sort={sortObj} //后端排序
                        loading={{ show: showLoading, }}
                        sheetHeader={{ height: 30, ifshow: false }}
                    />
                </div>
                <Alert show={delModalVisible}
                    context={'是否要删除'}
                    confirmFn={() => {
                        this.confirmGoBack(1);
                    }}
                    cancelFn={() => {
                        this.confirmGoBack(2);
                    }}
                />
                <PopupModal
                    editModelVisible={editModelVisible}
                    onCloseEdit={this.onCloseEdit}
                    currentIndex={selectedIndex}
                    btnFlag={btnFlag}
                    ColumnsData={ColumnsData}
                    list={list || []}
                >
                    {children}
                </PopupModal>
            </div>
        )
    }
}
EditGrid.propTypes = propTypes;
EditGrid.defaultProps = defaultProps;
export default EditGrid;
